<template>
  <ContentDetailWrap>
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <div class="w-full flex justify-between">
      <div class="w-85%">
        <!--    展示字段-->
        <Descriptions :schema="descriptionSchema" :data="form" />
        <!--    商品信息-->
        <div class="flex my-20px text-14px font-bold">商品信息</div>
        <el-table
          :data="shopTableList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('wholesalOrder.warehouse')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(warehouseList, row.wid) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.code')"
            prop="code"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.name')"
            prop="name"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.type')"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(warehouseTypeList, row.is_futures) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.arrivalDate')"
            prop="arrival_date"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.realArrivalDate')"
            prop="real_arrival_date"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.originalPrice')"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.original_price }}({{ row.actual_quoted_currency_name }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.discountedPrice')"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.actual_price }}({{ row.actual_quoted_currency_name }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.theActualPricePaid')"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.actual_selling_price }}({{
                useEnumeratePicker(currentList, form?.currency ?? '')
              }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.quantity')"
            prop="quantity"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.brand')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(brandList, row.brand) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.computingPower')"
            prop="hashrate"
            min-width="150"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.warranty')"
            prop="expiration_date"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column fixed="right" label="操作" width="150">
            <template #default="{ row }">
              <el-button
                v-if="row.is_futures !== 0 && row.quantity > 0"
                type="primary"
                @click="handleInventoryTypeConversion(row)"
                size="small"
              >
                {{ t('order.inventoryTypeConversion') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--    支付信息-->
        <!-- <div class="flex my-20px text-14px font-bold">支付信息</div>
        <el-table
          :data="payTableList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('order.paymentMethod')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(paymentMethodList, row.pay_method) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.receivingAccountNumber')"
            prop="pay_account"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.transactionTicketNumber')"
            prop="voucher_code"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.proofOfTransfer')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              <el-image
                v-if="row.transfer_voucher_url"
                style="width: 100px; height: 100px"
                :src="row.transfer_voucher_url"
                :preview-teleported="true"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[row.transfer_voucher_url]"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.paymentTrackingCode')"
            prop="pay_code"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentCurrency')"
            prop="pay_currency"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentLinks')"
            prop="payment_url"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentTime')"
            prop="pay_time"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.theAmountToBePaid')"
            prop="pay_amount"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentStatus')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(itemPayStatusList, row.pay_status) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.notes')"
            prop="notes"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.reviewers')"
            prop="reviewer"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(operatorList, row.reviewer) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.reviewTime')"
            prop="reviewer_time"
            min-width="250"
            :show-overflow-tooltip="true"
          />
        </el-table> -->
        <!--    自提信息-->
        <div v-if="form.delivery_method === 0">
          <div class="flex my-20px text-14px font-bold">自提信息</div>
          <el-table
            :data="selfPickupTableList"
            highlight-current-row
            stripe
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              :label="t('order.pickupCode')"
              prop="pickup_code"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.pickUpAddress')"
              prop="pickup_address"
              min-width="400"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.theNameOfThePersonWhoPickedUpTheGoods')"
              prop="pickup_name"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.pickUpPersonSPhoneNumber')"
              prop="pickup_phone"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.passportOfThePersonPickingUpTheGoods')"
              prop="pickup_passport"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.pickUpPersonSVehicleInformation')"
              prop="pickup_vehicle"
              min-width="200"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
        <div v-if="form.delivery_method === 1">
          <!--    收货信息-->
          <div class="flex my-20px text-14px font-bold">收货信息</div>
          <el-table
            :data="receivingTableList"
            highlight-current-row
            stripe
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              :label="t('order.consignee')"
              prop="name"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.phone')"
              prop="phone"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.email')"
              prop="email"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.zipCode')"
              prop="zip_code"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.address')"
              prop="address"
              min-width="350"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.alternateAddress')"
              prop="address2"
              min-width="350"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.company')"
              prop="company"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.aging')"
              min-width="200"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(agingList, row.prescription) }}
              </template>
            </el-table-column>
          </el-table>
          <!--    物流信息-->
          <div class="flex my-20px text-14px font-bold">物流信息</div>
          <el-table
            :data="logisticsTableList"
            highlight-current-row
            stripe
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              :label="t('order.logisticsCompanies')"
              min-width="200"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(logisticsCompanyList, row.company) }}
              </template>
            </el-table-column>
            <el-table-column
              :label="t('order.trackingNumber')"
              prop="logistics_no"
              min-width="250"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.logisticsVouchers')"
              min-width="250"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <div v-if="row.logistics_voucher && row.logistics_voucher.length">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="row.logistics_voucher[0]"
                    :preview-teleported="true"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="row.logistics_voucher"
                    fit="cover"
                  />
                  <div>{{ `共${row.logistics_voucher.length}张` }}</div>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column
              :label="t('order.cost')"
              prop="cost"
              min-width="200"
              :show-overflow-tooltip="true"
            /> -->
            <el-table-column prop="cost" label="成本" width="160">
              <template #default="{ row }">
                <div v-for="(item, index) in row.cost" :key="index">
                  <span>{{ useEnumeratePicker(operatorOptions.costing, item.type) }}:</span>
                  <span>{{ item.amount }}</span>
                  <span>{{
                    useEnumeratePicker(operatorOptions.currency, item.transaction_currency_id)
                  }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--      时间线-->
      <TimeLine class="w-15%" :data="timeLineList" />
      <!--      库存类型转换弹框-->
      <InventoryTypeConversion ref="DialogInventoryTypeConversionRef" @refresh="initialize" />
    </div>
  </ContentDetailWrap>
</template>
<script setup lang="tsx">
import TimeLine from './components/TimeLine/index.vue'
import InventoryTypeConversion from './components/DialogInventoryTypeConversion/index.vue'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { useEnumeratePicker } from '@/utils'
import { getOrderEnumApi, getDetailApi } from '@/api/order'
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'
import { ElImage } from 'element-plus'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const loading = ref<boolean>(false)
const routerParams = ref<Record<string, any>>({})
const DialogInventoryTypeConversionRef = ref<InstanceType<typeof InventoryTypeConversion>>()

const form = ref<Record<string, any>>({})

const shopTableList = ref<Array<Record<string, any>>>([])
const payTableList = ref<Array<Record<string, any>>>([])
const selfPickupTableList = ref<Array<Record<string, any>>>([])
const receivingTableList = ref<Array<Record<string, any>>>([])
const logisticsTableList = ref<Array<Record<string, any>>>([])
const timeLineList = ref<Array<Record<string, any>>>([])

const receiptMethodList = ref<Array<Record<string, any>>>([])
const orderStatusList = ref<Array<Record<string, any>>>([])
const paymentStatusList = ref<Array<Record<string, any>>>([])
const operatorList = ref<Array<Record<string, any>>>([])

const brandList = ref<Array<Record<string, any>>>([])
const currentList = ref<Array<Record<string, any>>>([])
const warehouseList = ref<Array<Record<string, any>>>([])
const warehouseTypeList = ref<Array<Record<string, any>>>([])

const paymentMethodList = ref<Array<Record<string, any>>>([])
const agingList = ref<Array<Record<string, any>>>([])
const logisticsCompanyList = ref<Array<Record<string, any>>>([])
const itemPayStatusList = ref<Array<Record<string, any>>>([])

const descriptionSchema = ref<DescriptionsSchema[]>([
  {
    field: 'user',
    label: t('order.customer')
  },
  {
    field: 'order_no',
    label: t('order.orderCode')
  },
  {
    field: 'total_amount',
    label: t('order.theTotalAmountOfTheOrder')
  },
  {
    field: 'order_status',
    label: t('order.orderStatus'),
    slots: {
      default: (data: Record<string, any>) => {
        const statusMap = {
          10: '#FFA500', // 黄色 - 待处理
          20: '#FFD700', // 黄色
          21: '#32CD32', // 绿色
          30: '#1E90FF', // 蓝色
          40: '#9370DB', // 紫色
          50: '#20B2AA', // 青色
          70: '#c8c9cc', // 红色 - 已取消
          100: '#67c23a' // 绿色 - 已完成
        }
        const color = statusMap[data.order_status] || 'var(--el-color-warning)'
        return (
          <span
            style={`color: ${color}; background-color: var(--el-color-info-light-9); font-weight: 600; font-size: 12px; padding: 5px 15px; border-radius: 4px`}
          >
            {useEnumeratePicker(orderStatusList.value, data.order_status)}
          </span>
        )
      }
    }
  },
  {
    field: 'pay_amount',
    label: t('order.theAmountToBePaid')
  },
  {
    field: 'pay_status',
    label: t('order.payStatus'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(paymentStatusList.value, data.pay_status)}</span>
      }
    }
  },
  {
    field: 'delivery_method',
    label: t('order.receiptMethod'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(receiptMethodList.value, data.delivery_method)}</span>
      }
    }
  },
  {
    field: 'voucher',
    label: t('order.proofOfReceipts'),
    slots: {
      default: (data: Record<string, any>) => {
        return (
          <>
            {data.voucher && data.voucher.length && (
              <div>
                <ElImage
                  class="w-100px h-100px"
                  src={data.voucher[0]}
                  previewTeleported={true}
                  zoomRate={1.2}
                  maxScale={7}
                  minScale={0.2}
                  previewSrcList={data.voucher}
                  fit="cover"
                />
                <div>{`共${data.voucher.length}张`}</div>
              </div>
            )}
          </>
        )
      }
    }
  }
])

//打开库存类型转换弹框
const handleInventoryTypeConversion = (row: Record<string, any>) => {
  if (form.value.order_type == 2) {
    let path = `/order/wholesal-order-management/shopInventoryTypeConversion`
    let params = {} as any
    params.order_item_id = row?.id
    params.order_id = query.id
    params.wholesal_id = row.wholesal_id
    push({ path: path, query: params })
  } else {
    nextTick(() => {
      DialogInventoryTypeConversionRef.value!.dialogVisible = true
      DialogInventoryTypeConversionRef.value?.getBackShow(JSON.parse(JSON.stringify(row)))
    })
  }
}

//获取枚举
const operatorOptions = ref<Record<string, any>>({})
const getDropDownBoxInfo = async () => {
  const resp = await getOrderEnumApi({ field: 'all' })
  operatorOptions.value = resp.data
  receiptMethodList.value = resp.data.delivery_method
  orderStatusList.value = resp.data.status
  paymentStatusList.value = resp.data.pay_status
  paymentMethodList.value = resp.data.pay_method
  brandList.value = resp.data.brand
  currentList.value = resp.data.currency
  warehouseList.value = resp.data.warehouse
  warehouseTypeList.value = resp.data.is_futures
  agingList.value = resp.data.prescription
  logisticsCompanyList.value = resp.data.logistics_company
  itemPayStatusList.value = resp.data.item_pay_status
  operatorList.value = resp.data.operator
}

const initialize = async () => {
  // routerParams.value = JSON.parse(decodeURIComponent(query.data as unknown as string)) || {}
  const resp = await getDetailApi((query.id as string) || '')
  form.value = resp.data
  shopTableList.value = resp.data.list
  payTableList.value = resp.data.payment
  selfPickupTableList.value = resp.data.pickup
  receivingTableList.value = resp.data.delivery
  logisticsTableList.value = resp.data.logistics
  timeLineList.value = resp.data.logger
}
onMounted(() => {
  getDropDownBoxInfo()
  initialize()
})
</script>
<style lang="less" scoped></style>
